<template>
  <vxe-table align="left" :data="tableData" size="small" border min-height="0">
    <vxe-column field="id" title="会议ID" />
    <vxe-column field="meetingTopic" title="会议主题" />
    <vxe-column field="startTime" title="会议开始时间">
      <template #default="{ row }">
        {{ $XEUtils.toDateString(row.startTime, 'yyyy-MM-dd HH:mm:ss') }}
      </template>
    </vxe-column>
    <vxe-column field="estimatedDuration" title="预估会议时长" />
    <vxe-column field="location" title="会议地点" />
    <vxe-column field="creatorName" title="组织人" />
    <vxe-column field="meetingType" title="会议类型">
      <template #default="{ row }">
        <span>
          {{
            dictStore.getDictLabelForValue(
              'meeting_association_type',
              row.meetingType
            )
          }}
        </span>
      </template>
    </vxe-column>
    <vxe-column field="description" title="会议描述" showOverflow />
    <vxe-column field="status" title="状态">
      <template #default="{ row }">
        <span>
          {{
            dictStore.getDictLabelForValue(
              'meeting_participation_status',
              row.status
            )
          }}
        </span>
      </template>
    </vxe-column>
    <vxe-column title="操作" width="80">
      <template #default="{ row }">
        <el-link type="primary" @click="handleDetail(row.id)">详情</el-link>
      </template>
    </vxe-column>
  </vxe-table>
  <el-pagination
    v-if="tableData.length"
    background
    :current-page="queryForm.pageNo"
    :layout="layout"
    :page-size="queryForm.pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script setup>
  import { meetingsPage } from '@/api/project/index'
  import { useDictStore } from '@/store/modules/dict'

  const props = defineProps({
    associationType: {
      type: [Number, String],
      default: '',
    },
    associationId: {
      type: Number,
      default: 1,
    },
  })

  const router = useRouter()

  const dictStore = useDictStore()

  const tableData = ref([])
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const total = ref(0)
  const queryForm = ref({
    pageNo: 1,
    pageSize: 10,
  })

  const getList = () => {
    const params = {
      ...queryForm.value,
      associationType: props.associationType,
      associationId: props.associationId,
    }
    meetingsPage(params).then((res) => {
      if (res.code == 0 || res.code == 200) {
        tableData.value = res.data.list || []
        total.value = res.data.total || 0
      }
    })
  }

  const handleSizeChange = (val) => {
    queryForm.value.pageSize = val
    getList()
  }

  const handleCurrentChange = (val) => {
    queryForm.value.pageNo = val
    getList()
  }

  const handleDetail = (id) => {
    router.push(`/meetings/details?id=${id}`)
  }

  getList()
</script>

<style lang="scss" scoped></style>
